<!DOCTYPE html>
<html>
<head>
    <title>注册 - 简约界面</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
    <link rel="stylesheet" href="${ctxPath}/assets/common/css/register.css?v=202"/>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="no-padding">
<!-- reg-wrapper -->
<div class="login-wrapper reg-wrapper">
    <div class="layui-container">
        <form class="layui-form">
            <h2>用户注册</h2>
            <div class="layui-form-item">
                <label class="layui-form-label">账号名称</label>
                <div class="layui-input-block">
                    <input class="layui-input" name="name" type="text" placeholder="请输入账号名称"
                           lay-verType="tips" lay-verify="required" maxlength="100" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-block">
                    <input class="layui-input" name="phone" type="text" placeholder="请输入手机号码"
                           lay-verType="tips" lay-verify="required|phone" maxlength="100" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电子邮箱</label>
                <div class="layui-input-block">
                    <input class="layui-input" name="email" type="text" placeholder="请输入电子邮箱"
                           lay-verType="tips" lay-verify="required|email" maxlength="100" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">登录密码</label>
                <div class="layui-input-block">
                    <input class="layui-input" name="password" type="password" placeholder="请输入登录密码"
                           lay-verType="tips" lay-verify="required|psw" maxlength="100" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block">
                    <input class="layui-input" name="repeat" type="password" placeholder="请再次输入登录密码"
                           lay-verType="tips" lay-verify="required" data-target="input[name=password]"
                           data-tips="两次密码输入不一致" required/>
                </div>
            </div>
            <!--<div class="layui-form-item" style="margin-bottom: 18px;">-->
                <!--<label class="layui-form-label">验证码</label>-->
                <!--<div class="layui-input-block login-captcha-group">-->
                    <!--<input class="layui-input" name="code" type="text" placeholder="请输入验证码"-->
                           <!--autocomplete="off" lay-verType="tips" lay-verify="required" maxlength="20" required/>-->
                    <!--<img class="login-captcha" src="/assets/captcha"/>-->
                <!--</div>-->
            <!--</div>-->
            <div class="layui-form-item layui-text">
                <div class="layui-input-block" style="min-height: unset;">
                    <a href="/login">返回登录</a>
                </div>
            </div>
            <div>
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-lg layui-btn-fluid" lay-filter="regSubmit" lay-submit>
                        注册
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@/* 加入contextPath属性和session超时的配置 */
<script type="text/javascript">
    var Feng = {
        ctxPath: "${ctxPath}",
        version: '${constants.getReleaseVersion()}'
    };
</script>
<!--  js部分 -->
<script type="text/javascript" src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/js/jquery.min.js"></script>
<script>
    layui.use(['layer', 'form', 'formX'], function () {
        var layer = layui.layer;
        var form = layui.form;

        // 表单提交
        form.on('submit(regSubmit)', function (obj) {
            if ($('input[name="password"]').val() != $('input[name="repeat"]').val()){
                layer.msg("两次密码输入不一致", {icon: 2, time: 1500});
                return false;
            }
            var loadIndex = layer.msg('请求中...', {icon: 16, shade: 0.01, time: false});
            $.ajax({
                type:'post',
                url:Feng.ctxPath + "/register",
                async:true,
                data:obj.field,
                success:function (res) {
                    console.log(res);
                    layer.msg("注册成功", {icon: 1, time: 1500}, function () {
                        location.href = '/login';
                    });
                    layui.data('ew-site', {key: 'phone', value: obj.field.phone});
                },
                error:function (e) {
                    //返回500错误 或者其他 http状态码错误时 需要在error 回调函数中处理了
                    // 并且返回的数据还不能直接alert，需要使用
                    //$.parseJSON 进行转译    res.msg 是自己组装的错误信息通用变量
                    layer.close(loadIndex);
                    var res = $.parseJSON(e.responseText);
                    console.log(res);
                    layer.msg(res.message, {icon: 5, time: 3000});
                }

            });

            return false;
        });

    });
</script>
</body>
</html>